<template>
  <div class="container">
<!-- logo-->
    <div class="logo">
      <img src="../assets/images/logo2.png" alt="">
    </div>
<!--    表单登录，注册-->
    <van-tabs v-model="activeName">
<!--      账号登录-->
      <van-tab name="a" title="账号登陆">
        <van-form @submit="onSubmit">
          <van-field
              v-model="username"
              :rules="[{ required: true, message: '请填写注册手机号' }]"
              label="用户名"
              name="username"
              placeholder="手机号"
          />
          <van-field
              v-model="password"
              :rules="[{ required: true, message: '请填写密码' }]"
              label="密码"
              name="password"
              placeholder="密码"
              type="password"
          />
          <!--        记住登录状态-->
          <div class="state">
            <van-checkbox v-model="checked" checked-color="#07c160">记住我</van-checkbox>
            <router-link tag="a" to="/forget_passwd">忘记密码？</router-link>
          </div>
          <!--点击登录-->
            <van-button block native-type="submit" round type="info">登录</van-button>
          <!--点击返回首页-->
          <router-link class="goHome" tag="div" to="/index">
            <van-icon name="arrow-left"/>
            <span>我再看看，稍后登录/注册！</span></router-link>
        </van-form>
      </van-tab>
<!--      注册账号-->
      <van-tab name="b" title="注册登录">
        <van-field v-model="text" label="昵称"/>
        <van-radio-group v-model="radio" direction="horizontal">
          性别：
          <van-radio checked-color="#07c160" name="0">男</van-radio>
          <van-radio checked-color="#07c160" name="1">女</van-radio>
        </van-radio-group>
        <van-field v-model="password1" label="输入密码" type="password"/>
        <van-field v-model="password2" label="确认密码" type="password"/>
        <van-field v-model="tel" label="手机号" type="tel"/>
        <van-field
            v-model="code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button :disabled="isDisabled" size="small" type="primary" @click="postCode">发送验证码</van-button>
          </template>
        </van-field>
        <van-button block round type="info" @click="register">注册</van-button>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {registry} from '../api/api'
import {phoneCade} from '../api/api'
import {Notify} from 'vant'
export default {
  name: "Login",
  data() {
    return {
      //账户登录
      username: '',
      password: '',
      checked: true,
      payload: {},
      //tab切换
      activeName: 'a',
      //注册
      tel: '',
      text: '',
      password1: '',
      password2: '',
      code: '',
      radio: '0',
      isDisabled: false,
    };
  },
  methods: {
    onSubmit(values) {
      // console.log('submit', values, this.checked);
      this.payload['username'] = values.username
      this.payload['password'] = values.password
      this.payload['remberMe'] = this.checked
      this.$store.dispatch('Login', this.payload)
    },
    //点击注册方法
    register() {
      // console.log('点击了注册');
      // console.log(this.text)
      // console.log(this.tel);
      // console.log(this.radio);
      // console.log(this.password1);
      // console.log(this.password2);
      // console.log(this.code);
      if (this.password1 === this.password2) {
        registry(this.tel, this.code, this.tel, this.password1, this.text, this.radio).then(res => {
          if (res.code == 0) {
            Notify({type: 'success', message: '注册成功,请登入'});
          } else {
            Notify({type: 'danger', message: '请填入合适的注册信息'});
          }
        })
      } else {
        Notify({type: 'danger', message: '两次密码不匹配'});
      }
    },
    //  发送验证码
    postCode() {
      if (!(/^1[3456789]\d{9}$/.test(this.tel))) {
        Notify({type: 'danger', message: '手机号错误！'});

      } else {
        this.isDisabled = true;
        setTimeout(() => {
          this.isDisabled = false;
        }, 60000)
        phoneCade(this.tel).then()
      }

    },

  //  点击登录


  },
  mounted() {
    // login()
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 80%;
  margin: 80px auto;
  //登陆状态
  .logo {
    margin-bottom: 20px;
    img {
      width: 100%;
    }
  }
  //状态
  .state {
    padding: 10px 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  //  返回首页
  .goHome {
    padding: 30px 0 0;
    font-size: 13px;
    color: #07C160;
    display: flex;
    align-items: center;

    i {
      background-color: #07C160;
      border-radius: 50%;
      padding: 10px;
      color: white;
      font-size: 20px;
    }

    span {
      margin-left: 20px;
    }
  }
}

//tab切换 下划线
/deep/ .van-tabs__line {
  width: 45%;
  background-color: #07C160;
}

//按钮样式
/deep/ .van-button {
  background-color: #07C160;
}

//label 样式
/deep/ .van-field__label {
  color: black;
  width: 5em;
}

//输入框
/deep/ .van-cell {
  background-color: #e7fff0;
  border-radius: 25px;
  margin-bottom: 10px;
  padding: 5px 10px;
}

//多选框
/deep/ .van-radio-group {
  padding: 0 20px 5px;
}
</style>